<template>
  <div class="boxsty boxBottom flex justifyContentCenter alignItemsCenter flexColumn" style="height: 43vh;">
    <div class="userBox">
      <el-avatar class="avatar" shape="square" :size="68" fit="cover" :src="userInfo.avatar"></el-avatar>
      <div>
        <div class="userName">欢迎您，{{ userInfo.ryName }}</div>
        <div class="userDepart">{{ userInfo.ryZw ? userInfo.ryZw : "" }}</div>
      </div>
    </div>
    <div class="flex justifyContentSpaceBetween welBtn titbottom">
      <div class="welNumBox">
        <div class="welNum">{{counts.bcpsl?counts.bcpsl:0}} <i>个</i></div>
        <div>统计数据<br/>(根据业务需要进行展示)</div>
        <!-- 被测评数 -->
      </div>
      <div class="welNumBox">
        <div class="welNum">{{counts.cpsl?counts.cpsl:0}} <i>个</i></div>
        <div>统计数据<br/>(根据业务需要进行展示)</div>
        <!-- 测评数 -->
      </div>
      <div class="welNumBox">
        <div class="welNum">{{counts.szbgsl?counts.szbgsl:0}} <i>个</i></div>
        <div>统计数据<br/>(根据业务需要进行展示)</div>
        <!-- 述职报告 -->
      </div>
    </div>
    <div class="numTip">
      * 此数据仅显示本年度数据
    </div>

  </div>
</template>

<script>
import {
  getUserInFoCount
} from "@/api/ceping/cepinghdglb";

import {
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      counts: {},
      jiangNum:0
    }
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(['permissions', 'userInfo'])
  },
  methods: {

    // 获取数据列表 预览分页查询使用
    getDataList() {
      getUserInFoCount().then(res => {
        // this.counts = res.data.data
      });

    },
    

  }
}

</script>
<style>
.lineBox{
  border-radius: 4px;
    background: linear-gradient(-100deg, #0777d2, #7395f4);
    -webkit-box-shadow: 0 0 10px #0093e9;
    box-shadow: 0 0 10px #0093e9;
    width: 100%;
    text-align: center;
    margin-top: 2%;
    padding: 10px 10px;
    font-size: 18px;
    color: #fff;
}
.lineBox:nth-child(2) {
      background: linear-gradient(-100deg, #ff933b, #ffba5a);
      box-shadow: 0 0 10px #da7336;
    }

.lineBox:nth-child(3) {
      background: linear-gradient(-100deg, #21b4bd, #50e0d6);
      box-shadow: 0 0 10px #3bc7d3;
    }
.lineBox:nth-child(4) {
      background: linear-gradient(-100deg, #218611, #40af2f);
      box-shadow: 0 0 10px rgb(34, 168, 17);
      cursor: pointer;
    }    
</style>
